<template>
  <!-- 设备详情 -->
  <view class="content bg-white">
    <view class="title t-c">经营统计报表详情</view>
    <view class="table">
      <uni-table ref="tableRef" :loading="state.loading" emptyText="暂无更多数据">
        <uni-tr>
          <uni-th width="75" align="center">时间</uni-th>
          <uni-th width="75" align="center">在线订单数</uni-th>
          <uni-th width="75" align="center">订单用户数</uni-th>
          <uni-th width="75" align="center">在线订单金额</uni-th>
          <uni-th width="75" align="center">退款金额</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in state.dataSource" :key="index">
          <uni-td align="center">{{ item.dateTime }}</uni-td>
          <uni-td align="center">
            <view class="name">{{ item.onlineOrderCount }}</view>
          </uni-td>
          <uni-td align="center">{{ item.orderUserCount }}</uni-td>
          <uni-td align="center">{{ item.onlineOrderAmount }}</uni-td>
          <uni-td align="center">{{ item.onlineRefundAmount }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { adminStatistics } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();
const state = reactive({
  param: {
    periodType: 'day',
    startTime: '',
    endTime: ''
  },
  loading: false,
  dataSource: []
});

const tableRef = ref(null);

const loadData = () => {
  state.loading = true;
  adminStatistics(state.param)
    .then(res => {
      if (res.success) {
        state.dataSource = res.result.list;
      }
    })
    .finally(() => {
      state.loading = false;
    });
};

// 页面加载完成
onLoad(async option => {
  await proxy.$onLaunched;
  if (option.param) {
    state.param = JSON.parse(option.param);
  } else {
    state.param.startTime = proxy.$filter.getToday()[0];
    state.param.endTime = proxy.$filter.getToday()[1];
  }
  loadData();
});
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.table {
  padding-bottom: 20rpx;
  :deep(.uni-table-th) {
    padding: 12px 2px;
    font-size: 23rpx;
    background: #f0f0f0;
  }
  :deep(.uni-table-td) {
    padding: 8px 2px;
    font-size: 24rpx;
  }
}

.title {
  padding: 40rpx 0;
}
</style>
